<template>
    <div id="mine">
        <!-- 我的页面中，我的信息部分 -->
            <div class="top">
                <div class="avatarInfo">
                    <img :src="info.avatar">
                    <div class="nickName">
                        <p>{{info.nickname}}</p>
                        <p><i>Level {{level}}</i></p>
                    </div>
                </div>
                <div class="arrow">
                    <img src="../assets/rightArrow.png"/>
                </div>
            </div>
        <!-- 中间的title部分 -->
            <div class="songItems">
                <ul>
                    <li>创建歌单</li>
                    <li>收藏歌单</li>
                    <li>歌单助手</li>
                </ul>
            </div>
        <!-- 创建歌单张卡片 -->
        <div class="songCards">
            <div class="cardTitle">
                <div class="title-left">
                    创建歌单({{createLength}}个)
                </div>
                <div class="title-right">
                    <img src="../assets/add.png">
                    <img src="../assets/ellipsis.png">
                </div>
            </div>
            <div class="cardBody">
                <div class="card" v-for="(item,index) in createItems" :key="index">
                    <img :src="item.coverImgUrl">
                    <div class="mid">
                        <p>{{item.name}}</p>
                        <p>{{item.trackCount}}首</p>
                    </div>
                    <img src="../assets/ellipsis.png">
                </div>
            </div>
        </div>
        <!-- 收藏歌单卡片 -->
        <div class="songCards">
            <div class="cardTitle">
                <div class="title-left">
                    收藏歌单({{collectLength}}个)
                </div>
                <div class="title-right">
                    <img src="../assets/add.png">
                    <img src="../assets/ellipsis.png">
                </div>
            </div>
            <div class="cardBody">
                <div class="card" v-for="(item,index) in collectItems" :key="index">
                    <img :src="item.coverImgUrl">
                    <div class="mid">
                        <p>{{item.name}}</p>
                        <p>{{item.trackCount}}首</p>
                    </div>
                    <img src="../assets/ellipsis.png">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'mine',
    data(){
        return {
            info:{
                avatar:'',
                nickname:'',
            },
            createItems:[],
            createLength:undefined,
            collectItems:[],
            collectLength:undefined,
            level:undefined,

        }
    },
   async created(){
       const id=window.localStorage.getItem('id');
        try{
         //获取个人信息，参数id 585255855 
        const data1=await this.$http.get('http://localhost:3000/user/detail', {params:{uid:id}})
        //获取用户等级信息
        this.level=data1.data.level;
        const infoMsg={
            avatar:data1.data.profile.avatarUrl,
            nickname:data1.data.profile.nickname
        }
        this.info=infoMsg;
        //获取用户歌单信息
        const data2=await this.$http.get('http://localhost:3000/user/playlist',{params:{uid:id}});
        //0是我喜欢的音乐信息。所以要从0开始
        //创建歌单数据
        let createSongs=data2.data.playlist.filter(val=>val.userId==id);
        this.createItems=createSongs.map((val,index)=>{
            let item={
                    coverImgUrl:val.coverImgUrl,
                    name:val.name,
                    trackCount:val.trackCount
                }
            return item;
        }).slice(1);
        this.createLength=createSongs.length-1;
        //收藏歌单数据
        let collectSongs=data2.data.playlist.filter(val=>val.userId!=id);
        this.collectItems=collectSongs.map((val,index)=>{
            let item={
                    coverImgUrl:val.coverImgUrl,
                    name:val.name,
                    trackCount:val.trackCount
                }
            return item;
        })
        this.collectLength=collectSongs.length;
        }catch(error){
            console.log(error);
        }
    },
    methods:{

    }
}
</script>

<style lang="stylus" scoped>
    #mine
        width 100%
        height 100%
        padding-top 50px
        box-sizing border-box
        .top
            display flex
            flex-direction row
            justify-content space-between
            align-items center
            margin 20px 10px
            height 100px
            box-shadow 0px 0px 5px #eeeeee 
            border-radius 10px
            padding 0 10px
            .avatarInfo
                display flex
                flex-direction row
                justify-content center
                align-items center
                img
                    width 60px
                    height 60px
                    border 1px solid #eeeeee
                    border-radius 50%
                .nickName
                    padding-left 10px
                    p:nth-child(1)
                        font-family sans-serif
                        font-weight 800
                    p:nth-child(2)
                        font-size 10px
                        padding 5px
                        color #a5a5a5
            .arrow
                img 
                    width 20px
                    height 20px
        .songItems
            padding 5px 0
            margin 0px 20px
            ul
                text-align center
                margin 0 auto
                li
                    display inline
                    margin 0 10px
                    font-weight 700
                li:nth-child(1)
                    border-bottom 2px solid #e6463a
                    padding 5px 0
                li:nth-child(2),li:nth-child(3)
                    padding 5px 0px 5px 20px
                    color #a5a5a5
                    border-left 1px solid #eeeeee
        .songCards
            width 90%
            margin 0px auto 20px auto
            box-shadow 0px 0px 5px #eeeeee
            border-radius 5px 
            .cardTitle
                width 100%
                display flex
                flex-direction row
                justify-content space-between
                align-items center
                padding 5px 0px
                margin-top 20px
                .title-left
                    padding 0px 20px
                    font-size 10px
                    color #a5a5a5
                img:nth-child(1)
                    width 20px
                    height 20px
                img:nth-child(2)
                    padding 0px 20px 
                    width 20px
                    height 20px
            .cardBody
                .card
                    display flex
                    flex-direction row
                    justify-content space-between
                    align-items center
                    box-sizing border-box                       
                    img:nth-child(1)
                        margin 5px 10px 5px 20px
                        width 50px
                        height 50px
                        border-radius 10px
                        border 1px solid #eeeeee
                    img:last-child
                        padding 0px 20px 
                        width 20px
                        height 20px
                    .mid
                        flex 1
                        width 0
                        p
                            padding 5px
                            white-space nowrap
                            overflow hidden
                            text-overflow ellipsis
                            font-size 14px
                        p:last-child
                            color #a5a5a5
                            font-size 10px
                            
</style>